<template>
  <div ref="print">
    <a-drawer
      placement="right"
      :closable="false"
      :maskClosable="true"
      @close="onDrawerClose"
      destroyOnClose
      :visible="visible"
      width="100%"
      :title="title"
      :getContainer="false"
    >
      <!-- <div class="qrcode" ref="qrCodeUrl" ></div> -->
      <div id="print" style="position: relative; font-size: 12px;padding-top: 10px;">
        <!-- 材料清单 -->
        <a-row :gutter="20" style="font-size: 14px; height: 50px">
          <a-col :span="8"> 订单编号：{{ entity.Code }} </a-col>
          <a-col :span="8"> 采购订单名称：{{ entity.Name }} </a-col>
          <a-col :span="8"> 订单类型：{{ Type }} </a-col>
        </a-row>
        <a-row :gutter="20" style="font-size: 14px; height: 50px">
          <a-col :span="8"> 采购日期：{{ entity.PurchaseDate }} </a-col>
          <a-col :span="8"> 预计交货日期：{{ entity.HandoverDate }} </a-col>

          <a-col :span="8"> 采购单位：{{ entity.SupplierName }} </a-col>
        </a-row>
        <!-- <a-row style="font-size:14px;height: 50px"> 订单名称：{{ entity.Name }} </a-row> -->
        <a-table
          ref="table"
          :columns="columns"
          :rowKey="row => row.Id"
          :pagination="false"
          @change="handleTableChange"
          :dataSource="dataArr"
          :loading="loading"
          :bordered="true"
          size="small"
        >
          <template slot="dataIndex" slot-scope="text, record, index">
            <span>{{ (pagination.current - 1) * pagination.pageSize + index + 1 }}</span>
          </template>
        </a-table>

        <div style="height: 50px"></div>
      </div>
      <div
        :style="{
          position: 'fixed',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 9999
        }"
      >
        <a-button :style="{ marginRight: '8px' }" @click="onDrawerClose">取消</a-button>
        <a-button type="primary" v-print="'#print'">打印</a-button>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
import moment from 'moment'
export default {
  data() {
    return {
      id: '',
      qrnum: 0,
      loading: false,
      Type: '',
      printflag: true,
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          scopedSlots: { customRender: 'dataIndex' },
          width: '41px'
        },
        { title: '编号', dataIndex: 'Code' },
        { title: '名称', dataIndex: 'Name' },
        {
          title: '规格',
          dataIndex: 'Spec'
        },
        {
          title: '采购单位',
          dataIndex: 'UnitGroupName'
        },
        { title: '数量', dataIndex: 'Nums', align: 'right' },
        { title: '单价', dataIndex: 'Price', align: 'right' },
        { title: '金额', dataIndex: 'Amount', align: 'right' },
        { title: '税率%', dataIndex: 'Rate', align: 'right' },
        {
          title: '保质期单位',
          dataIndex: 'PeriodOfValidityUnit'
        },
        {
          title: '保质期',
          dataIndex: 'PeriodOfValidity',
          align: 'right'
        }
      ],
      arrlist: [],
      pagination: {
        current: 1,
        pageSize: 500,
        showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`,
        pageSizeOptions: ['500', '1000', '1500'], //设置pageSize的可选值，页面啊可以通过下拉框进行选择
        showSizeChanger: true,
        onShowSizeChange: (current, pageSize) => {
          this.pageSize = pageSize
        }
      },
      visible: false,
      ProductionOrderListObj: {},
      dataArr: [],
      datamain: [],
      queryParam: {},
      selectedRowKeys: [],
      dataList: [],
      title: '',
      QrCode: '',
      entity: {}
    }
  },
  methods: {
    getEnum() {
      // this.$http.get('/Base/Base_Enum/GetByCode?code=PurchaseType&type=' + this.entity.Type).then(resJson => {
      //   setTimeout(() => {
      //     this.Type = resJson.Data.EnumItems[0].Name
      //   }, 1)
      //   // this.enumData = resJson.Data
      //   // this.enumItems = [...resJson.Data.EnumItems]
      // })
      this.$http.post('/Base_BasicData/Base_DictionaryDetails/GetTheData', { id: this.entity.Type }).then(resJson => {
        this.loading = false
        this.Type = resJson.Data.DicName
      })
    },
    changelist2(value) {
      console.log(value)
      this.pagination.pageSize = value
      this.getDataList()
    },
    changelist(value, a, b) {
      this.pagination.current = value.target.value
      this.getDataList()
    },
    getType(type) {
      if (type == '1') {
        return '全部盘点'
      } else if (type == '2') {
        return '仓库盘点'
      } else if (type == '3') {
        return '部分盘点'
      }
    },
    print() {
      // window.location.reload()
    },
    creatQrCode(qText, div) {
      var ar = new QRCode(div, {
        text: qText, // 需要转换为二维码的内容
        width: 80,
        height: 80,
        colorDark: '#000000',
        colorLight: '#ffffff'
      })
      console.log(ar)
    },
    FaType(k) {
      if (k == 1) return '租赁'
      else return '购买'
    },
    creatQrCodenew(qText, div) {
      this.qrnum++
      var qrcode = new QRCode(div, {
        text: qText,
        width: 100,
        height: 100,
        colorDark: '#000000',
        colorLight: '#ffffff'
      })
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination = { ...pagination }
      this.getDataList()
    },
    getDataList(row) {
      this.loading = true
      this.$http
        .post('/TD/TD_Check/GetCheckData', {
          PageIndex: this.pagination.current,
          PageRows: this.pagination.pageSize,
          SortField: 'MaterialCode',
          SortType: 'desc',
          Search: { checkId: this.id }
        })
        .then(res => {
          console.log(res)
          this.loading = false

          // for (let i = 0; i < document.getElementsByClassName('ant-table-pagination').length; i++) {
          //   document.getElementsByClassName('ant-table-pagination')[i].className = 'noprint'
          // }

          this.data = res.Data
          const pagination = { ...this.pagination }
          pagination.total = res.Total
          if (this.arrlist.length == 0) {
            var num = Math.ceil(pagination.total / pagination.pageSize)
            for (let i = 0; i < num; i++) {
              this.arrlist.push(i + 1)
            }
          }
          this.pagination = pagination
          this.$nextTick(() => {
            if (this.qrnum >= 1) {
              return
            }
            this.creatQrCodenew(this.entity.QrCode, this.$refs['qrCodeUrl'])
          })
          // this.entity.Time = moment(res.Data.CheckTime)
          // this.entity.Type = res.Data.Type
          // this.entity.StorId = res.Data.CheckStorId
          // this.data = res.Data.CheckDataList
          // this.entity.CheckStorName = res.Data.CheckStorName
        })
    },
    async openDrawer(id, title) {
      this.entity = {}
      this.dataArr = []
      this.visible = true
      this.$http.post('/PB/PB_Purchase/GetPurchaseData?PurchaseId=' + id, {}).then(res => {
        this.loading = false
        if (res.Success) {
          console.log(res)
          res.Data.PurchaseDetail.forEach(item => {
            item.Name = item.MaterialName
            item.Spec = item.MaterialSpec
            item.Code = item.MaterialCode
            item.PurchaseName = item.UnitGroupName
          })
          res.Data.PurchaseDate = moment(res.Data.PurchaseDate).format('YYYY-MM-DD')
          res.Data.HandoverDate = res.Data.HandoverDate ? moment(res.Data.HandoverDate).format('YYYY-MM-DD') : null

          this.entity = res.Data

          this.dataArr = res.Data.PurchaseDetail
          this.getEnum()
        }
      })

      // this.id = row.Id
      // this.entity = row
      // this.getDataList()
    },
    onDrawerClose() {
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped>
* {
  font-family: 微软雅黑;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}

.barcode {
  float: left;
  display: block;
  width: 19.625rem;
  height: 6.25rem;
  margin-left: 2%;
}

/* .production-title{
	width: 55%;
	float: left;
	margin-left: 5%;
} */
.production-title li {
  width: 50%;
  line-height: 3.125rem;
  float: left;
  display: block;
  margin: 0 0px;
}
.production-title li label {
  margin-right: 20px;
}
.details {
  width: 100%;
  /* display: flex; */
  box-sizing: border-box;
  /* flex-wrap: wrap;
  justify-content: space-between; */
  padding: 0 2%;
  margin-top: 2%;
}
.qrcode {
  width: 101px;
  height: 101px;
  position: absolute;
  top: 0;
  right: 15%;
  border: 1px solid #000;
}
.qrcode img {
  display: block;
  float: left;
}
.maiqrcode {
  width: 101px;
  height: 101px;
  float: left;
  margin-right: 10%;
  box-sizing: border-box;
}
.Listdetails {
  float: left;
  margin-right: 3%;
  width: 30%;
  height: 20%;
  position: relative;
  box-sizing: border-box;

  margin-bottom: 3%;
}
.detacode label {
  float: right;
  margin-right: 4%;
  margin-top: 10%;
  font-size: 18px;
}
.Listable {
  width: 98%;
  margin-left: 2%;
  float: left;
}
.Listable tr td {
  line-height: 3.125rem;
  font-size: 0.875rem;
}
.Print {
  position: fixed;
  bottom: 10%;
  right: 5%;
}
/* 444444444 */
#print td {
  line-height: 26px;
}
.listQrcode {
  width: 80px;
  height: 100px;
  position: absolute;
  top: 3%;
  right: 3%;
  /* border: 1px solid #000; */
}
.qr {
  position: absolute;
  bottom: 0;
  left: 0;
  line-height: 20px;
  height: 20px;
}
td {
}
.detacode {
  margin-top: 1%;
  display: flex;
  height: 100px;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 5px;
}
.rowprint {
  /* font-size: 18px; */
  font-size: 12px;
  box-sizing: border-box;
  line-height: 20px;
  padding: 0 4%;
}
.rowprint span {
  font-size: 14px;
  font-weight: bold;
}
#print ul li {
  /* font-size: 18px; */
}
.centertd {
  text-align: center;
  height: 40px;
}
.centertd-height {
  text-align: center;
  height: 50px;
}
#manter {
  margin: 0 auto;
}
.floatleft {
  width: 800px;
}
.floatright {
  width: 200px;
  height: 140px;
}
#print {
  font-size: 12px;
  color: #000;
}
h3 {
  font-size: 12px;
  color: #000;
}
.yeprint {
  position: fixed;
  right: 10%;
  top: 0;
  line-height: 55px;
  z-index: 100;
}
#print /deep/ .ant-table-body {
  font-size: 12px;
}
</style>
